<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今天中午吃什么</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            color: #333;
            text-align: center;
            padding: 20px;
        }

        h1 {
            color: #5f6368;
        }

        .menu {
            display: inline-block;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-top: 30px;
            width: 80%;
            max-width: 400px;
        }

        .menu h2 {
            font-size: 24px;
            margin-bottom: 15px;
        }

        .options {
            list-style-type: none;
            padding: 0;
        }

        .options li {
            background-color: #ffeb3b;
            margin: 8px 0;
            padding: 10px;
            border-radius: 4px;
            font-size: 18px;
        }

        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            font-size: 18px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
        }

        .btn:hover {
            background-color: #45a049;
        }

        .random-menu {
            font-size: 24px;
            margin-top: 30px;
            color: #ff5722;
            font-weight: bold;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .flashing {
            animation: flashingEffect 0.5s infinite;
        }

        @keyframes flashingEffect {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.3;
            }
            100% {
                opacity: 1;
            }
        }

        .menu-item-change {
            animation: changeItem 1s forwards;
        }

        @keyframes changeItem {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            50% {
                opacity: 0.5;
                transform: scale(1.2);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .footer {
            margin-top: 50px;
            font-size: 14px;
            color: #888;
        }
    </style>
</head>
<body>
    <h1>今天中午吃什么？</h1>

    <div class="menu">
        <h2>中午推荐菜单</h2>
        <ul class="options" id="menuOptions"></ul>
        <button class="btn" onclick="randomMenu()">随机选择</button>
    </div>

    <div class="random-menu" id="randomMenu"></div>

    <div class="footer">
        <p>希望你今天吃得开心！</p>
    </div>

    <script>
        // 动态生成菜单项
        const menuItems = ["拉面", "沙县小吃", "米线"];
        const optionsList = document.getElementById('menuOptions');
        menuItems.forEach(item => {
            const li = document.createElement('li');
            li.textContent = item;
            optionsList.appendChild(li);
        });
    
        let isAnimating = false;
    
        function randomMenu() {
            if (isAnimating) return;
            isAnimating = true;
    
            const randomMenuElement = document.getElementById('randomMenu');
            randomMenuElement.classList.add('flashing');
    
            setTimeout(() => {
                const randomIndex = Math.floor(Math.random() * menuItems.length);
                randomMenuElement.innerHTML = "";
                randomMenuElement.classList.remove('menu-item-change');
                void randomMenuElement.offsetWidth; // 强制重排
                randomMenuElement.innerHTML = `今天中午你可以吃: ${menuItems[randomIndex]}`;
                randomMenuElement.classList.add('menu-item-change');
                randomMenuElement.classList.remove('flashing');
                randomMenuElement.style.opacity = 1;
                isAnimating = false;
            }, 1000);
        }
    </script>
</body>
</html>
